<template>
    <div class="accountManagement">
      <cus-body
          :tableColumn="tableColumn"
          :tableData="tableData"
          :tableBorder="true"
          :hasPage="false"
          :operate="false"
          :total="total"
          @getNavList="getNavList"
          :searchCriteriaData="searchCriteriaData"
          :searchCriteria="searchCriteria">
        <template v-slot:incompatibility="incompatibility">
          <div class="bodyView">
          <el-tag v-for="data in incompatibility.propsData.incompatibility" effect="plain" size="large">{{ data }}</el-tag>
          </div>
        </template>
      </cus-body>
    </div>

</template>
<script setup name="navList">
import CusBody from "@/components/cus-body.vue";
import {reactive, ref} from "vue";
// 搜索模块的数据对象
const searchCriteriaData = reactive({
  name: null,
  administratorName: null
})

const total = ref(100)
// 搜索条件的配置项
const searchCriteria = reactive([
  {
    type: 'input',   // 搜索条件类型，目前支持：input、select、time、date、dateTime
    label: '权限名称',   // 搜索条件的标题
    dataValueName: 'name', // v-model绑定的值
    placeholder: '',    // 搜索框里面的提示内容
    isRequired: false,  // 是否必填
  },
])

// 表格数据
let tableData = reactive([
  {
    name: '办理入职',
    incompatibility:[
        '新增部门'
    ],
    authorizationTime: '2023-01-05',
    remake: '',
  },
  {
    name: '新增部门',
    incompatibility:[
      '修改角色信息',
        '办理入职'
    ],
    authorizationTime: '2023-01-05',
    remake: '',
  },
  {
    name: '办理离职',
    incompatibility: [],
    authorizationTime: '2023-01-05',
    remake: '',
  },
  {
    name: '修改人员信息',
    incompatibility: [],
    authorizationTime: '2023-01-05',
    remake: '',
  },
  {
    name: '调职',
    incompatibility: [],
    authorizationTime: '2023-01-05',
    remake: '',
  },
  {
    name: '添加角色',
    incompatibility: [],
    authorizationTime: '2023-01-05',
    remake: '',
  },
  {
    name: '修改角色信息',
    incompatibility: [
      '新增部门'
    ],
    authorizationTime: '2023-01-05',
    remake: '',
  },
  {
    name: '绑定人员',
    incompatibility: [],
    authorizationTime: '2023-01-05',
    remake: '',
  },
  {
    name: '合并部门',
    incompatibility: [],
    authorizationTime: '2023-01-05',
    remake: '',
  },
])

// 表格的配置项
const tableColumn = reactive([
  {
    label: '权限名称',
    prop:'name',
    isFixed: false,
    openStol: false,
    width: null,
  },
  {
    label: '互斥权限',
    prop:'incompatibility',
    isFixed: false,
    openStol: true,
    width: null,
  },
  {
    label: '系统授权时间',
    prop:'authorizationTime',
    isFixed: false,
    openStol: false,
    width: null,
  },
  {
    label: '备注',
    prop:'remake',
    isFixed: false,
    openStol: false,
    width: null,
  }
])

</script>
<style scoped lang="scss">
.accountManagement {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.bodyView {
  width: 100%;
  height: auto;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  gap: 10px;
  flex-wrap: wrap;
}
</style>